<template>
    <el-main>
        <el-breadcrumb separator="/" style="margin-bottom:30px;">
            <el-breadcrumb-item :to="{ path: '/home/index/welcome' }">首页
            </el-breadcrumb-item>
            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form ref="editForm" :model="editForm" label-width="100px" :rules="rules" style="width:50%;">
            <!-- 登录名 -->
            <el-form-item label="登录名" prop="UserName">
                <el-input v-model="editForm.UserName" :disabled="true" autocomplete='off'></el-input>
            </el-form-item>
            <!-- 昵称 -->
            <el-form-item label="昵称" prop="nickName">
                <el-input v-model="editForm.nickName" autocomplete='off'></el-input>
            </el-form-item>
            <!-- 邮箱 -->
            <el-form-item prop="email" label="邮箱" :rules="[
                { type: 'email', message: '邮箱不能为空' , trigger: ['blur'] }
                ]">
                <el-input v-model="editForm.email" autocomplete='off'></el-input>
            </el-form-item>
            <!-- 手机号码 -->
            <el-form-item label="手机号" prop="phone">
                <el-input type="tel"
                    pattern.native="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"
                    v-model="editForm.phone" autocomplete='off'></el-input>
            </el-form-item>
            <!-- 是否修改密码 -->
            <el-form-item label="">
                <el-switch v-model="isEditPassword" autocomplete='off'></el-switch>
            </el-form-item>
            <template v-if="isEditPassword">
                <el-form-item label="旧密码" prop="OldPassword">
                    <el-input placeholder="请输入" v-model="editForm.OldPassword"
                        show-password autocomplete='off'></el-input>
                </el-form-item>
                <!-- 登录修改 -->
                <el-form-item label="登录密码" prop="password" :rules="[
                        { required: true, message:  '密码不能为空', trigger: 'blur' },
                        { min: 6, max: 30, message:  '密码为6~30位', trigger: 'blur' }
                        ]">
                    <el-input placeholder="请输入" v-model="editForm.password"
                        show-password autocomplete='off'></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="确认密码" prop="password2">
                    <el-input placeholder="请输入" v-model="editForm.password2"
                        show-password autocomplete='off'></el-input>
                </el-form-item>
            </template>
        </el-form>
        <div style="text-align: center;width: 50%">
            <el-button @click="handleEdit">重置</el-button>
            <el-button type="primary" @click="setAccountInfo('editForm')">确认</el-button>
        </div>
    </el-main>
</template>
<script>
    import {
        personalCenter,
        updatePersonal,
    } from '../../api.js'
    import {
        mapState
    } from 'vuex'

    export default {
        name: "personal",
        data() {
            var validatePass2 = (rule, value, callback) => {
                console.log(value)
                if (value === '') {
                    callback(new Error("密码不能为空"));
                } else if (value !== this.editForm.password) {
                    callback(new Error("密码不一致"));
                } else {
                    callback();
                }
            }
            return {
                breadcrumbName: '',
                breadcrumbPath: '',
                breadcrumbNameP: '',
                isEditPassword: false,
                editForm: {
                    Uid:'',
                    nickName: '',
                    password: '',
                    password2: '',
                    UserName: '',
                    phone: '',
                    email: '',
                    OldPassword:'',
                },
                rules: {
                    OldPassword: [{
                        required: true,
                        message: '请输入旧密码',
                        trigger: 'blur'
                    }],
                    password2: [{
                        required: true,
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                },
            }
        },
        mounted() {
            this.breadcrumbName = this.$route.query.breadcrumbName
            this.breadcrumbPath = this.$route.query.breadcrumbPath
            this.breadcrumbNameP = this.$route.query.breadcrumbNameP
            this.getAccountInfo()
        },
        methods: {
            getAccountInfo(index, row) {
                personalCenter({}).then(res => {
                    if (res.code == 0) {
                        this.editForm.nickName = res.data.list.nikeName
                        this.editForm.Uid = res.data.list.id
                        this.editForm.password = ''
                        this.editForm.password2 = ''
                        this.editForm.UserName = res.data.list.userName
                        this.editForm.phone = res.data.list.phone
                        this.editForm.email = res.data.list.email
                        this.editForm.OldPassword = ''
                    } else {
                        this.$message.error(res.message);
                    }
                })
            },
            setAccountInfo(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                         var dataObj = JSON.parse(JSON.stringify(this.editForm)) ;
                        updatePersonal(dataObj).then(res => {
                            if (res.code == 0) {
                                this.$message.success("操作成功");
                                this.getAccountInfo();
                            } else {
                                this.$message.error(res.message);
                            }
                        })
                    }
                })
            },
            handleEdit(){
                this.getAccountInfo();
            },
        },
        computed: {
            ...mapState({
                language: state => state.language
            }),
        },
    }
</script>

<style>

</style>